<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <div class="top">
          <h3>
            <el-icon size="30" color="orange"><HomeFilled /></el-icon>考勤管理
          </h3>
          <div class="hright">
            <el-icon size="20"><MoreFilled /></el-icon>
            <el-icon size="20" color="orange"><CirclePlus /></el-icon>
          </div>
        </div>
        <el-menu
          active-text-color="orange"
          default-active="/index/business"
          class="el-menu-vertical-demo"
          @select="handleSelect"
        >
          <!-- 一个 menu-item 就是一个菜单项 -->
          <el-menu-item  index="/index/business">
            <el-icon size="22"><Tickets /></el-icon>
            <span>出差申请</span>
          </el-menu-item>
          <el-menu-item index="/index/outside">
            <el-icon size="22"><Tickets /></el-icon>
            <span>外勤打卡</span>
          </el-menu-item>
          <el-menu-item index="/index/leave">
            <el-icon size="22"><Tickets /></el-icon>
            <span>请假申请</span>
          </el-menu-item>
          <el-menu-item index="/index/work">
            <el-icon size="22"><Tickets /></el-icon>
            <span>加班申请</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 占位组件 -->
      <router-view></router-view>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {useRouter} from 'vue-router'
var $router = useRouter()
var handleSelect=(index)=>{
  $router.push(index)

}
</script>
<style scoped lang='scss'>
aside {
  min-height: 700px;
  & .top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    h3 {
      margin: 20px 0;
      & i {
        vertical-align: bottom;
      }
    }
    & .hright {
      box-sizing: border-box;
      i {
        margin-top: 10px;
        margin-left: 10px;
      }
    }
  }
}
.el-menu-item.is-active{
  background-color: rgb(248, 232, 203);
}
</style>